{% extends 'base/base.html' %}

{% block title %}注册 - 多用户报警系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-center align-items-center mb-4">
                    <i class="fa fa-user-plus" aria-hidden="true" style="font-size: 2rem; color: #52c41a; margin-right: 10px;"></i>
                    <h3 class="text-center">用户注册</h3>
                </div>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    {% if form.errors %}
                        <div class="alert alert-danger" role="alert">
                            <i class="fa fa-exclamation-circle" aria-hidden="true"></i> 请检查以下错误并重新提交表单。
                        </div>
                    {% endif %}
                    <div class="mb-3">
                        <label for="id_username" class="form-label">
                            <i class="fa fa-user-o" aria-hidden="true"></i> 用户名
                        </label>
                        {{ form.username }}
                        {% if form.username.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.username.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <label for="id_phone" class="form-label">
                            <i class="fa fa-phone" aria-hidden="true"></i> 手机号 (可选)
                        </label>
                        {{ form.phone }}
                        {% if form.phone.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.phone.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <label for="id_password1" class="form-label">
                            <i class="fa fa-lock" aria-hidden="true"></i> 密码
                        </label>
                        {{ form.password1 }}
                        {% if form.password1.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.password1.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <div class="form-text text-muted">
                            密码必须包含至少8个字符，不能太简单，不能全是数字。
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="id_password2" class="form-label">
                            <i class="fa fa-lock" aria-hidden="true"></i> 确认密码
                        </label>
                        {{ form.password2 }}
                        {% if form.password2.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.password2.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fa fa-user-plus" aria-hidden="true"></i> 注册
                        </button>
                    </div>
                </form>
                <div class="text-center mt-4">
                    <p>已有账号？<a href="{% url 'accounts:login' %}">立即登录</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为表单元素添加焦点效果
        const formInputs = document.querySelectorAll('.form-control');
        formInputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('shadow-sm');
            });
            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('shadow-sm');
            });
        });
        
        // 添加密码强度检测
        const passwordInput = document.getElementById('id_password1');
        const passwordHelp = passwordInput.nextElementSibling;
        
        if (passwordHelp && passwordHelp.classList.contains('form-text')) {
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;
                let feedback = '';
                let color = '';
                
                if (password.length >= 8) {
                    strength++;
                }
                if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
                    strength++;
                }
                if (password.match(/[0-9]/)) {
                    strength++;
                }
                if (password.match(/[^A-Za-z0-9]/)) {
                    strength++;
                }
                
                switch(strength) {
                    case 0:
                        feedback = '密码为空';
                        color = 'text-muted';
                        break;
                    case 1:
                        feedback = '密码强度：弱';
                        color = 'text-danger';
                        break;
                    case 2:
                        feedback = '密码强度：中';
                        color = 'text-warning';
                        break;
                    case 3:
                        feedback = '密码强度：良好';
                        color = 'text-info';
                        break;
                    case 4:
                        feedback = '密码强度：强';
                        color = 'text-success';
                        break;
                }
                
                passwordHelp.innerHTML = passwordHelp.innerHTML.replace(/密码强度：[\s\S]*/, feedback);
                passwordHelp.className = 'form-text ' + color;
            });
        }
    });
</script>
{% endblock %}